<template>
  <el-container>
    <el-header style="height: auto">
      <div class="logo">
        <img src="@/assets/logo.png" alt="" />
        <span
          ><h2>三he视 讯</h2>
          <br />
          <span>郑州市培训中心</span></span
        >
      </div>

    </el-header>

    <el-main>
      <div class="listyle">
        <li>
          <div class="imga">
            <img
              :src="
                overallPic != ''
                  ? `http://117.160.141.22:6085/platform/management/faceDetection/${overallPic}`
                  : imgsrc
              "
              alt="获取图片失败"
            />
            <!-- <img src="./assets/tx.jpg" alt="" /> -->
          </div>
        </li>
        <li class="list">
          <h3>考生信息</h3>
          <div class="img-xx">
            <img
              :src="
                facePic !== ''
                  ? `http://117.160.141.22:6085/platform/management/faceImage/${facePic}.jpg`
                  : imgsrc
              "
              alt="暂无考生照片"
            />
            <ul>
              <li>
                <p>姓 名</p>
                ： <span>{{ personName }}</span>
              </li>

              <li>
                <p>科 目</p>
                ：
                <span>{{ examinationName }}</span>
              </li>
              <li>
                <p>实训设备</p>
                ：
                <span>{{ equipmentName }}</span>
              </li>
            </ul>
          </div>
          <h3 class="tgxx" :style="{ color: cor }">
            验证通过,请前往对应设备进行考试!
          </h3>
        </li>
      </div>
    </el-main>
  </el-container>
</template>

<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance(); // SpeechSynthesisUtterance
export default {
  name: "App",
  components: {},
  data() {
    return {
      lanData: [],
      value: "",
      faceRecognitionId: "",
      overallPic: "",
      facePic: "",
      // closeupPic: "",
      personName: "",
      examinationName: "",
      equipmentName: "",
      imgsrc: require("./assets/tx.jpg"),
      cor: "#fff",
      raid: "",

      websock: null,
      reconnectData: null,
      lockReconnect: false, //避免重复连接，因为onerror之后会立即触发 onclose
      timeout: 30000, //10s一次心跳检测
      timeoutObj: null,
      serverTimeoutObj: null,
    };
  },
  mounted() {
    // let vConsole = new Vconsole();
    // console.log(vConsole);
    // setTimeout(() => {
    //   this.lanData = syth.getVoices();
    // }, 1000);

    var skipId = window.location.search;
    if (skipId) {
      this.raid = skipId.match(/=(\w*)/)[1];
    }
    if (this.raid != "") {
      this.init();
    }
  },
  watch: {
    personName() {
      this.handleSpeak2(
        "请" + this.personName + ",到" + this.equipmentName + "进行考试"
      );
    },
  },
  methods: {
    handleSpeak2(text) {
      msg.text = text; // 文字内容:
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 2; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 2; // 音高：1
      synth.speak(msg); // 播放
      console.log("播放");
    },
    handleSpeak(str) {
      var url =
        "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=" +
        encodeURI(str);
      var n = new Audio(url);
      n.src = url;
      n.play();
    },
    bof() {
      // this.handleSpeak2("请张三到一号测试机进行考试");
      // this.handleSpeak("百度语音测试");
      console.log(synth.getVoices());
    },
    bof2() {
      this.handleSpeak("百度语音测试");
    },
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持webSocket");
      } else {
        // let wsurl =
        //   "ws://117.160.141.22:6085/platform/veriface/api/websocket/" +
        //   this.raid;
        let wsurl =
          "ws://117.160.141.22:6085/platform/veriface/api/websocket/" +
          this.raid;
        this.websock = new WebSocket(wsurl);
        this.websock.onopen = this.websocketonopen; //连接成功
        this.websock.onmessage = this.websocketonmessage; //广播成功
        this.websock.onerror = this.websocketonerror; //连接断开，失败
        this.websock.onclose = this.websocketclose; //连接关闭
      }
    }, //初始化weosocket
    websocketonopen() {
      console.log("连接成功" + new Date());
      this.heatBeat();
    }, //连接成功
    websocketonerror() {
      console.log("连接失败" + new Date());
      this.reconnect();
    }, //连接失败
    websocketclose() {
      this.reconnect();
    }, //各种问题导致的 连接关闭
    websocketonmessage(msg) {
      this.heatBeat(); //收到消息会刷新心跳检测，如果一直收到消息，就推迟心跳发送
      let data = JSON.parse(msg.data);
      console.log(data);
      if (data.type == "heart") {
        return;
      }
      this.overallPic = data[0].imageDetection; //拍照全景图片
      // this.closeupPic = data[0].closeupPic; //特写图片
      this.facePic = data[0].studentIdCard; // 数据库图片
      this.personName = data[0].studentName; //用户姓名
      this.cor = "#3A9C6C";
      this.equipmentName = data[0].equipmentName;
      this.examinationName = data[0].examinationName;
    }, //数据接收
    websocketsend(data) {
      this.websock.send(JSON.stringify(data));
    }, //数据发送
    reconnect() {
      console.log("重新连接");
      if (this.lockReconnect) {
        return;
      }
      this.lockReconnect = true;
      this.reconnectData && clearTimeout(this.reconnectData);
      this.reconnectData = setTimeout(() => {
        this.init();
        this.lockReconnect = false;
      }, 10000);
    }, //socket重连
    heatBeat() {
      this.timeoutObj && clearTimeout(this.timeoutObj);
      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
      this.timeoutObj = setTimeout(() => {
        this.websocketsend({ cmd: "heart" }); //根据后台要求发送
        this.serverTimeoutObj = setTimeout(() => {
          this.websock.close(); //如果  5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
        }, 5000);
      }, this.timeout);
    }, //心跳检测
  },
  destroyed() {
    this.lockReconnect = true;
    this.websock.close(); //离开路由之后断开websocket连接
    clearTimeout(this.reconnectData); //离开清除 timeout
    clearTimeout(this.timeoutObj); //离开清除 timeout
    clearTimeout(this.serverTimeoutObj); //离开清除 timeout
  },
};
</script>

<style>
html,
body,
h1,
h2,
h3,
h4,
ul,
h5,
p,
#app {
  margin: 0;
  padding: 0;
}
body {
  background: #f3f3f3;
}
.logo {
  width: 100%;
  margin-bottom: 20px;
}
.logo::after {
  content: "";
  display: block;
}
.logo img {
  margin: 15px 15px 0 20px;
  width: 70px;
  float: left;
}
.logo h2 {
  display: inline-block;
  margin-top: 12px;
  line-height: 2em;
}
.el-se {
  position: absolute;
  top: 32px;
  right: 400px;
}
.el-se span {
  font-weight: bold;
  font-size: 20px;
}
.right-dom {
  position: absolute;
  top: 38px;
  right: 75px;
  font-size: 20px;
  font-weight: bold;
}
.right-dom span {
  color: #f78523;
}
.el-header {
  margin-bottom: 25px;
  box-shadow: 0 -5px 20px rgb(144 144 144);
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  color: #105f3f;
  margin-top: 0;
}
.listyle {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  min-height: 660px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.listyle > li {
  width: 45%;
  padding: 15px;
  flex-grow: 0;
  background: #009688;
  box-shadow: 0 0 10px #888;
}
.imga {
  width: 75%;
  height: 650px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
.listyle .imga img {
  min-width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list h3 {
  background: #fff;
  line-height: 3em;
  font-size: 28px;
  letter-spacing: 13px;
  text-align: center;
  line-height: 2em;
  margin: 15px 0;
}

.img-xx {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.img-xx img {
  height: 264px;
  width: auto;
}
.img-xx ul {
  background: #fff;
  margin-left: 20px;
  padding: 1px 0;
  flex: 1 0 0;
}
.img-xx ul li {
  font-size: 28px;
  line-height: 2.5em;
  padding: 7px 0 10px 15px;
}
.img-xx ul li:nth-child(2) {
  background: #eee;
}
.img-xx ul li p {
  display: inline-block;
  width: 112px;
  text-align: justify;
  text-align-last: justify;
}
</style>
